<template>
  <div class="login" @keydown.enter="handleSubmit('loginForm')">
    <pointwave/>
    <div class="login-con">
      <Card :border="false">
        <span slot="title">
          <Icon type="log-in"></Icon> Bybit工单系统
        </span>
        <div class="form-con">
          <Form ref="loginForm" :model="loginForm" :rules="loginRules">
            <FormItem prop="username">
              <Input v-model="loginForm.username" type="text" placeholder="输入Ldap用户名">
                <span slot="prepend">
                  <Icon type="person" size="16"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input v-model="loginForm.password" type="password" placeholder="输入Ldap密码">
                <span slot="prepend">
                  <Icon type="locked" size="16"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem>
              <Button type="warning" long @click="handleSubmit('loginForm')">登 录</Button>
              <!--<input id="checkbox" type="checkbox" class="no" v-model="remember"/>-->
              <!--<span class="remberpass">记住密码</span>-->
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
    import Pointwave from '@/components/Pointwave'

    export default {
        components: {
            Pointwave
        },
        name: 'login',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },
                loginRules: {
                    username: [{required: true, message: ' ', trigger: 'blur'}],
                    password: [{required: true, message: ' ', trigger: 'blur'}]
                },
                remember: false,
            }
        },
        methods: {
            handleSubmit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.$store.dispatch('login', this.loginForm).then(resp => {
                            this.$Notice.success({title: '登录成功！'})
                            this.$router.push({name: 'new'})
                            // localStorage.setItem('username',jwt(localStorage.token).username)
                        }).catch(error => {
                            console.log(error)
                            this.$Notice.error({title: '登录失败！'})
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="less">
  .login {
    width: 100%;
    height: 100%;
    background-image: url('../assets/bgbg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    opacity: 0.8;
    z-index: 100;

    &-con {
      position: absolute;
      right: 160px;
      top: 50%;
      z-index: 200;
      transform: translateY(-60%);
      width: 300px;
      opacity: 1;

      &-header {
        font-size: 16px;
        font-weight: 300;
        text-align: center;
        padding: 30px 0;
      }

      .form-con {
        padding: 10px 0 0;
      }

      .login-tip {
        font-size: 10px;
        text-align: center;
        color: #c3c3c3;
      }
    }
  }

  .no {
    position: absolute;
    right: 55px;
    top: 10px;
  }

  .remberpass {
    position: absolute;
    right: 5px;
    top: 1px;
  }

  .ivu-card-head {
    text-align: center;
    font-weight: 700;
    /*background: #505d72;*/
  }

  .ivu-card {
    background: transparent;
    /*text-align: center;*/
    position: relative;
    /*right: 50%;*/
    color: #ff7800;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, .1);
  }
  .ivu-input {
    background: transparent !important;
    height: 0;
    padding: 1.5em .5em;
    background-clip: content-box !important;
    color: #ff7800;
  }

  .ivu-input::first-line {
    color: #ff7800;
  }

  .ivu-input-group-prepend {
    background: transparent !important;
    background-clip: content-box !important;
    color: #ff7800;
  }
</style>
